<template>
    <div class="search-section">
      <div class="search-wrapper">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索物品名称"
              clearable
              @keyup.enter="handleSearch"
              style="height: 32px; max-height: 32px; overflow: visible;"
            >
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
  
          <el-form-item>
            <!-- 使用原生 select 替代 el-select -->
            <select
              v-model="searchForm.type"
              @change="handleSearch"
              class="custom-select"
              style="width: 100px; height: 32px;"
            >
              <option
                v-for="item in itemTypes"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </option>
            </select>
          </el-form-item>
  
          <el-form-item>
            <el-input-number
              v-model="searchForm.iv"
              :min="0"
              :max="31"
              placeholder="个体"
              @change="handleSearch"
              controls-position="right"
              style="width: 100px;"
            />
          </el-form-item>
  
          <el-form-item>
            <!-- 性格下拉框 -->
            <select
              v-model="searchForm.nature"
              @change="handleSearch"
              class="custom-select"
              style="width: 120px; height: 32px;"
            >
              <option
                v-for="item in natureOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.key }}
              </option>
            </select>
          </el-form-item>
  
          <el-form-item>
            <!-- 特性下拉框 -->
            <select
              v-model="searchForm.ability"
              @change="handleSearch"
              class="custom-select"
              style="width: 120px; height: 32px;"
            >
              <option
                v-for="item in abilityOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.key }}
              </option>
            </select>
          </el-form-item>
  
          <el-form-item>
            <select
              v-model="searchForm.sort"
              @change="handleSearch"
              class="custom-select"
              style="width: 120px; height: 32px;"
            >
              <option label="价格: 低到高" value="price_asc" />
              <option label="价格: 高到低" value="price_desc" />
              <option label="最新上架" value="time_desc" />
            </select>
          </el-form-item>
  
          <el-form-item>
            <el-checkbox v-model="searchForm.isShiny" @change="handleSearch">异色</el-checkbox>
          </el-form-item>
  
          <el-form-item>
            <div class="search-buttons">
              <el-button type="primary" @click="handleSearch" :loading="loading">
                <el-icon>
                  <Search />
                </el-icon>
                搜索
              </el-button>
              <el-button @click="resetSearch">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
  
        <div class="desktop-only">
          <div class="account-info-container">
            <!-- <div class="bean-balance">
              <el-tooltip content="我的XIN豆余额" placement="top">
                <div class="balance-container">
                    <svg t="1744176905853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6957" width="16" height="16"><path d="M60.974268 623.892437A430.636588 430.636588 0 0 1 13.963573 508.087872c-7.074877-29.788956-15.35993-67.956055-13.684302-110.219135 2.513443-62.277535 8.005782-112.360217 40.401271-189.252958 79.685456-188.973686 246.689788-247.527602 395.634566-183.9468 148.758597 63.673892 87.132695 227.606238 279.271458 376.644106 53.061577 41.145995 52.130672 45.335067 89.087595 64.790978 36.863832 19.455912 73.541484 36.026018 101.282448 53.62012 54.364844 34.722751 83.036713 65.814974 100.723906 97.372648 11.822492 21.03845 12.567216 39.098004 15.080659 58.926278 1.86181 13.591211 2.606534 21.503902 2.234171 36.026018a272.196581 272.196581 0 0 1-6.981786 44.683433c-17.035559 57.43683-26.716969 74.75166-41.332176 98.024282-14.894478 24.389707-33.512575 46.265972-55.295748 64.604797-33.047123 29.416594-46.824514 40.30818-71.586584 51.292858-22.341717 10.053772-53.992482 20.479907-116.363108 38.818733-52.316853 15.35993-127.627056 17.128649-181.247176 11.822491-26.716969-2.606534-83.129804-19.828274-95.697019-25.134431-18.338826-7.72651-34.722751-14.056663-50.920496-22.248626a937.235013 937.235013 0 0 1-105.657702-65.721883c-40.587452-28.858051-87.411966-76.334198-109.102049-99.51373-18.990459-20.293726-31.650765-37.701647-45.614338-56.226653-20.479907-27.368603-42.635443-59.577911-83.129804-128.464871v-0.09309z m435.849656-338.477007a23.831164 23.831164 0 0 0-37.050014-11.636311 70.562588 70.562588 0 0 0-26.437698 68.88696c4.282162 21.969355 12.753397 41.332176 25.786065 57.995373 14.801387 19.17664 35.467475 34.908932 62.091354 47.196876 22.155536 10.239953 48.220872 6.888696 67.211331-8.564325a23.924255 23.924255 0 0 0-2.606534-38.818732 202.471807 202.471807 0 0 1-54.178663-48.407053 215.969927 215.969927 0 0 1-34.815841-66.652788z" fill="#1296db" p-id="6958"></path></svg>
                  <span class="balance-amount">{{ formatPriceDisplay(userBalance || 0) }}</span>
                </div>
              </el-tooltip>
            </div> -->
  
            <div class="trade-account-balance">
              <el-tooltip content="交易行账户" placement="top">
                <div class="balance-container">
                    <svg t="1744176905853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6957" width="16" height="16"><path d="M60.974268 623.892437A430.636588 430.636588 0 0 1 13.963573 508.087872c-7.074877-29.788956-15.35993-67.956055-13.684302-110.219135 2.513443-62.277535 8.005782-112.360217 40.401271-189.252958 79.685456-188.973686 246.689788-247.527602 395.634566-183.9468 148.758597 63.673892 87.132695 227.606238 279.271458 376.644106 53.061577 41.145995 52.130672 45.335067 89.087595 64.790978 36.863832 19.455912 73.541484 36.026018 101.282448 53.62012 54.364844 34.722751 83.036713 65.814974 100.723906 97.372648 11.822492 21.03845 12.567216 39.098004 15.080659 58.926278 1.86181 13.591211 2.606534 21.503902 2.234171 36.026018a272.196581 272.196581 0 0 1-6.981786 44.683433c-17.035559 57.43683-26.716969 74.75166-41.332176 98.024282-14.894478 24.389707-33.512575 46.265972-55.295748 64.604797-33.047123 29.416594-46.824514 40.30818-71.586584 51.292858-22.341717 10.053772-53.992482 20.479907-116.363108 38.818733-52.316853 15.35993-127.627056 17.128649-181.247176 11.822491-26.716969-2.606534-83.129804-19.828274-95.697019-25.134431-18.338826-7.72651-34.722751-14.056663-50.920496-22.248626a937.235013 937.235013 0 0 1-105.657702-65.721883c-40.587452-28.858051-87.411966-76.334198-109.102049-99.51373-18.990459-20.293726-31.650765-37.701647-45.614338-56.226653-20.479907-27.368603-42.635443-59.577911-83.129804-128.464871v-0.09309z m435.849656-338.477007a23.831164 23.831164 0 0 0-37.050014-11.636311 70.562588 70.562588 0 0 0-26.437698 68.88696c4.282162 21.969355 12.753397 41.332176 25.786065 57.995373 14.801387 19.17664 35.467475 34.908932 62.091354 47.196876 22.155536 10.239953 48.220872 6.888696 67.211331-8.564325a23.924255 23.924255 0 0 0-2.606534-38.818732 202.471807 202.471807 0 0 1-54.178663-48.407053 215.969927 215.969927 0 0 1-34.815841-66.652788z" fill="#1296db" p-id="6958"></path></svg>
                  <span class="balance-amount" style="margin-left: 10px;" v-loading="false">{{ formatPriceDisplay(tradeBalance || 0) }}</span>
                  <el-button type="text" class="sync-account-btn" @click="syncTradeAccount" :loading="syncAccountLoading">
                    <el-icon v-if="!syncAccountLoading">
                      <Refresh />
                    </el-icon>
                  </el-button>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 所有方法、数据都由父组件传入，组件只负责展示
  const props = defineProps({
    searchForm: Object,
    itemTypes: Array,
    natureOptions: Array,      // 新增
    abilityOptions: Array,     // 新增
    userBalance: Number,
    tradeBalance: Number,
    loading: Boolean,
    syncAccountLoading: Boolean,
    formatPriceDisplay: Function,
    handleSearch: Function,
    resetSearch: Function,
    syncTradeAccount: Function
  })


  </script>
  
  <style scoped src="../index.scss"></style>
  